<style>
.progress_complete{ border:1px solid #B9B9B9; border-radius:3%; 
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px; padding:5px;
}
.progress_complete p{ margin:0px;}
</style>
<div class="span10" id="datacontent" style="width:100%; margin:0 auto;">
	<form  action="<{:U('Subject/select_video')}>"  method="get" direct="ajax_page_body" >
		<table class="table">
			<tbody>
				<tr>
					<td style="border:none">上传时间：
						<input class="input-small datetimepicker" data-date="" data-date-format="yyyy-mm-dd" type="text" name="stime" size="10" id="stime" value="<{$stime}>" autocomplete="off">
						-
						<input class="input-small datetimepicker" data-date="" data-date-format="yyyy-mm-dd" size="10" type="text" name="etime" id="etime" value="<{$etime}>" autocomplete="off">
						&nbsp;&nbsp;标题：
						<input class="input-small" name="title"  size="15" type="text" value="<{$title}>" autocomplete="off">
						<input type="submit" class="btn btn-primary pull-right" value="筛选" autocomplete="off"></td>
				</tr>
			</tbody>
		</table>
	</form>
	<div class="bootstrap-table">
		<ul class="nav nav-secondary">
			<li data-tab="tab1" class="active"><a data-toggle="tab" href="#tab1">视频列表</a></li>
			<li data-tab="tab2"><a data-toggle="tab" href="#tab2">上传视频</a></li>
		</ul>
		<div class="tab-content with-padding">
			<div class=" tab-pane active tab1" id="tab1">
				<div class="fixed-table-container" style=" margin-top:10px;" >
					<div class="fixed-table-body">
						<table id="data-table" class="table">
							<thead>
								<tr>
									<th style="" data-field="id"> <div class="th-inner "> </div>
										<div class="fht-cell"></div></th>
									<th style="" data-field="name"><div class="th-inner ">标题</div>
										<div class="fht-cell"></div></th>
									<!--<th style="" data-field="created_at"><div class="th-inner ">缩略图</div><div class="fht-cell"></div></th>--> 
									<!--<th style="" data-field="created_at"><div class="th-inner ">时长</div><div class="fht-cell"></div></th>-->
									<th style="" data-field="created_at"><div class="th-inner ">上传时间</div>
										<div class="fht-cell"></div></th>
								</tr>
							</thead>
							<tbody>
								<volist name="data" id="vo">
									<tr  id="video_info_<{$key}>">
										<td style=""><input type="radio"   name="ids[]" style="margin:0px"   autocomplete="off" value="<{$key}>">
											<textarea name="video_info" style="display:none"><{$vo.video_info}></textarea></td>
										<td><{$vo.title}></td>
										<!--<td style=" width:80px">
<div id="video_img">
<div style="position:absolute; margin-top:15px; left:50%"><span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span></div>
<img onclick="open_video(this)" url="<{$vo.m3u8_240}>"  src="<{$vo.thumbnail}>"  />
</div>
</td>--> 
										<!--<td style=""><{$vo.duration}></td>-->
										<td style=""><{$vo.uptime}></td>
									</tr>
								</volist>
							</tbody>
						</table>
					</div>
					<div class="ajaxpage"> <include file="./Apps/BoxAdmin/View/Ace/Public/pager.html" /> </div>
				</div>
			</div>
			<div class="tab-pane tab2" id="tab2" style="padding-top:10px;" >
				<form enctype="multipart/form-data" class="form-horizontal"  id="video_from" action="<{:addons_url('Video/Index/upload')}>" method="post">
					<div class="form-group">
						<div class="col-sm-6" style="position:relative" > <a  class="btn btn-default"> <i class="fa fa-plus" ></i>上传视频</a>
							<input  style="position:absolute; top:0px ; left:0px; opacity: 0;-moz-opacity:0;filter:alpha(opacity=0);" onchange="video_from()"  type="file" name="file" id="video_from_file"/>
						</div>
					</div>
				</form>
				<p>上传进度：</p>
				<div class="progress_list">
					<div class="progress_one">
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" id="video-progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width:0%"> <span class="sr-only">0% </span> </div> 
					</div>
					
				</div>
				
			</div>
		</div>
	</div>
</div>
</div>
<!-- <script type="text/javascript" charset="utf-8" src="__JS__/jquery-2.1.4.min.js"></script>--> 
<script type="text/javascript" charset="utf-8" src="__JS__/jquery.form.js"></script> 
<script type="text/javascript" charset="utf-8" src="http://cdn.aodianyun.com/lss/ckplayer/player.js"></script> 
<script>
function open_video(obj){
	var url=$(obj).attr("url");//视频地址
	var image=$(obj).attr("src");//封面图片
	 var w = "560";//视频宽度
	  var h = "368";//视频高度
	  var flashvars={f:'http://cdn.aodianyun.com/lss/ckplayer/m3u8.swf',a:url,c:0,s:4,i:image,lv:0};
	  var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
	  var video=[url];
	  CKobject.embed('http://cdn.aodianyun.com/lss/ckplayer/ckplayer.swf','videoPlayer','ckplayerFlashBox',w,h,false,flashvars,video,params);
	   $("#modal_video").modal("show");
}

	function modal_confirm(){
		var l=$('input[name="ids[]"]:checked ').size();
		if(l==0){
			alert("请选择视频");
			return false;
		}
		var id=$('input[name="ids[]"]:checked ').val();
		var img=$("#video_info_"+id).find("#video_img").html();
		$("#selected-file").html(img);
		$("#modal").modal("hide");
	} 
</script> 
<script >
 var mysetInterval;
function video_from(){
	var options = {  
		 //  target: '#output',          //把服务器返回的内容放入id为output的元素中      
		   beforeSubmit: showRequest,  //提交前的回调函数  
		   success:function(response) { 
				console.log(response);
				clearInterval(mysetInterval);
				UploadComplete(response);	//上传完成
			},      //提交后的回调函数  
		}  
   		$("#video_from").ajaxSubmit(options); 
}
	   
//开始上传中
function showRequest(){
	$("#video-progress-bar").width("1%");
	$(".sr-only").text("1%");
	mysetInterval=setInterval(uploading,1000);
}	 
//完成上传了
function UploadComplete(response){
	 var json = eval('(' + response + ')'); 
	 var html='<div class="progress_complete"><p>'+json.fileName+json.FlagString+'</p><p>'+json.location+'</p></div></div>';
	 $(".progress_list .progress_one").html(html);
}
//上传中
function uploading(){
	var fileName_str=$("#video_from_file").val();
	var pos = fileName_str.lastIndexOf("\\")*1;
	if(pos==-1){
		 pos = fileName_str.lastIndexOf("/")*1;	
	}
    fileName= fileName_str.substring(pos+1);
	$.getJSON("<{:addons_url('Video/Index/progress')}>",{fileName:fileName},function(data){
			$("#video-progress-bar").width(data+"%");
			$(".sr-only").text(data+"%");
	})
}
		

</script> 
